<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">github用户搜索</h3>
		<div>
			<input type="text" placeholder="请输入github用户名" v-model="keyWord"/>&nbsp;
			<button @click="search">搜索</button>
		</div>
	</section>
</template>

<script>
	import axios from 'axios'

	export default {
		name:'Search',
		data(){
			return {
				keyWord:''
			}
		},
		methods:{
			search(){
				//发送请求前，联系List更新数据
				this.$bus.$emit('updateList',{isFirst:false,isLoading:true,users:[],errMsg:''})
				//发送请求
				axios.get('https://api.github.com/search/users',{params:{q:this.keyWord}}).then(
					response => {
						//从请求中获取数据
						const {items} = response.data
						//发送请求成功后，联系List更新数据
						this.$bus.$emit('updateList',{isFirst:false,isLoading:false,users:items,errMsg:''})
					},
					error => {
						//发送请求失败后，联系List更新数据
						this.$bus.$emit('updateList',{isFirst:false,isLoading:false,users:[],errMsg:error.message})
					}
				)
			}
		}
	}
</script>

<style>

</style>